<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <title>Sakila Film Renting--User Center</title>
    <!-- Bootstrap Core CSS -->
    <link href="../../../css/bootstrap.min.css" rel="stylesheet" th:href="@{/css/bootstrap.min.css}" />
    <!-- Custom CSS -->
    <link href="../../../css/grayscale.css" rel="stylesheet" th:href="@{/css/grayscale.css}" />
    
    <link rel="stylesheet" href="../../../script/easyui/themes/icon.css" th:href="@{/script/easyui/themes/icon.css}" />
    <link rel="stylesheet" href="../../../script/easyui/themes/black/easyui.css" th:href="@{/script/easyui/themes/black/easyui.css}" />
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">

    <!-- Navigation -->
    <nav class="navbar navbar-custom navbar-fixed-top" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse">
                    <i class="fa fa-bars"></i>
                </button>
                <a class="navbar-brand page-scroll" href="../index.html" th:href="@{/}">
                    <i class="fa fa-play-circle"></i>  <span class="light">Film</span> Renting
                </a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse navbar-right navbar-main-collapse">
                <ul class="nav navbar-nav">
                    <!-- Hidden li included to remove active class from about link when scrolled up past about section -->
                    <li class="hidden">
                        <a href="#page-top"></a>
                    </li>
					<li sec:authorize="hasRole('ROLE_MEMBER')">
						<form action="#" method="post" th:action="@{/member/logout}">
							<input type="submit" value="Logout"  class="btn btn-default" />
						</form>
					</li>
					<li sec:authorize="hasRole('ROLE_MEMBER')">
						<a class="page-scroll" href="#" th:href="@{/member/}"><span sec:authentication="principal.member.name">Member Name</span></a>
					</li>
                    <li>
                        <a class="page-scroll" href="#order">All&nbsp;Orders</a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#contact">My&nbsp;Information</a>
                    </li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container -->
    </nav>

    <!-- Intro Header -->
    <header class="intro">
        <div class="intro-body">
            <div class="container">
                <div class="row">
                    <div class="col-md-8 col-md-offset-2">
                        <h1 class="brand-heading">Grayscale</h1>
                        <p class="intro-text">A free, responsive, one page Bootstrap theme.<br />Created by Start Bootstrap.</p>
                        <a href="#order" class="btn btn-circle page-scroll" title="View Films">
                            <i class="fa fa-angle-double-down animated">!</i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <!-- Table Section -->
    <section id="order" class="container content-section text-center">
        <table id="orders" toolbar="#searchBar" style="width:80%;"></table>
    </section>
	<div id="searchBar" style="padding:3px">
	    <span>Rental Date From: </span>
	    <input id="startDate" class="easyui-datebox" style="border:1px solid #ccc" />
	    <span>To: </span>
	    <input id="endDate"  class="easyui-datebox" style="border:1px solid #ccc" />
	    <a href="javascript:void(0)" class="easyui-linkbutton" plain="true" onclick="doSearch()">Search</a>
	    <span style="color:#3399FF;position:relative;left:50px;" id="tableTitle"></span>
	</div>

    <!-- Contact Section -->
    <section id="contact" class="container content-section text-center">
        <div class="row">
        	<div class="row">
           		<div class="col-lg-4 col-lg-offset-2"><h3><button id="viewOwnInfo" class="btn btn-lg btn-primary">View</button></h3></div>
           		<div class="col-lg-4 col-lg-offset-2" style="display: none"><h3><button id="hideOwnInfo" class="btn btn-lg btn-primary">Hide</button></h3></div>
           		<div class="col-lg-4 col-lg-offset-0"><h3><a href="#order" id="returnOrderTable">Return</a></h3></div>
          	</div>
            <div class="col-lg-8 col-lg-offset-2" id="myInfo" style="display:none">
               	<div class="row">
               		<div class="col-lg-2 col-lg-offset-2"><h5>First Name:</h5></div>
               		<div class="col-lg-6">Infos here</div>
               	</div>
               	<div class="row">
               		<div class="col-lg-2 col-lg-offset-2"><h5>Last Name: </h5></div>
               		<div class="col-lg-6">Infos here</div>
               	</div>
               	<div class="row">
               		<div class="col-lg-2 col-lg-offset-2"><h5>Phone: </h5></div>
               		<div class="col-lg-6">Infos here</div>
               	</div> 
               	<div class="row">
               		<div class="col-lg-2 col-lg-offset-2"><h5>Address: </h5></div>
               		<div class="col-lg-6">Infos here</div>
               	</div> 
               	<div class="row">
               		<div class="col-lg-2 col-lg-offset-2"><h5>District: </h5></div>
               		<div class="col-lg-6">Infos here</div>
               	</div> 
               	<div class="row">
               		<div class="col-lg-2 col-lg-offset-2"><h5>City: </h5></div>
               		<div class="col-lg-6">Infos here</div>
               	</div> 
               	<div class="row">
               		<div class="col-lg-2 col-lg-offset-2"><h5>Store: </h5></div>
               		<div class="col-lg-6">Infos here</div>
               	</div> 
               	<div class="row">
               		<div class="col-lg-8 col-lg-offset-5"><a href="modify.html" th:href="@{goto_modify}">Edit My Info</a></div>
               	</div>
            </div>
        </div>
    </section>

    <!-- Map Section -->
    <div id="map"></div>

    <!-- jQuery -->
    <script src="../../../script/jquery-2.1.4.min.js" th:src="@{/script/jquery-2.1.4.min.js}"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="../../../script/bootstrap.min.js" th:src="@{/script/bootstrap.min.js}"></script>

    <!-- Plugin JavaScript -->
    <script src="../../../script/jquery.easing.min.js" th:src="@{/script/jquery.easing.min.js}"></script>

    <!-- Custom Theme JavaScript -->
    <script src="../../../script/grayscale.js" th:src="@{/script/grayscale.js}"></script>
    
    <script src="../../../script/easyui/jquery.easyui.min.js" th:src="@{/script/easyui/jquery.easyui.min.js}"></script>
    <script src="../../../script/member.js" th:src="@{/script/member.js}"></script>
</body>
</html>
